<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aerial Config</title>
    <script>if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }</script>
    <script src="libraries/js/jquery-min.js"></script>
    <script src="libraries/js/moment.min.js"></script>
    <script src="libraries/js/numeral.min.js"></script>
    <script>if (window.module) module = window.module;</script>
    <link rel="stylesheet" href="libraries/css/w3.min.css">
    <link rel="stylesheet" href="libraries/css/all.min.css">
    <link rel="stylesheet" href="config.css">
</head>
<body>
<h1 style="padding-left: 1%">Aerial Config</h1>
<div class="w3-bar w3-grey">
    <button class="w3-bar-item w3-button tablink w3-blue" onclick="changeTab(event,'settingsTab')">Settings</button>
    <button class="w3-bar-item w3-button tablink" onclick="changeTab(event,'videoTab')">Videos</button>
    <button class="w3-bar-item w3-button tablink" onclick="changeTab(event,'textTab')">Text</button>
    <button class="w3-bar-item w3-button tablink w3-right" onclick="openPreview()">Preview</button>
</div>
<div id="settingsTab" class="tab">
    <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:20%">
        <a onclick="selectSetting('general')" id="settingsList-general" class="settingsListItem"><h3 class="w3-bar-item"><i class="fa fa-cog"></i> Settings</h3></a>
        <a onclick="selectSetting('multi-screen')" id="settingsList-multi-screen" class="w3-bar-item w3-button settingsListItem">Multi-Screen</a>
        <a onclick="selectSetting('playback')" id="settingsList-playback" class="w3-bar-item w3-button settingsListItem">Playback</a>
        <a onclick="selectSetting('transition')" id="settingsList-transition" class="w3-bar-item w3-button settingsListItem">Transitions</a>
        <a onclick="selectSetting('cache')" id="settingsList-cache" class="w3-bar-item w3-button settingsListItem">Video Cache</a>
        <a onclick="selectSetting('customVideo')" id="settingsList-customVideo" class="w3-bar-item w3-button settingsListItem">Custom Videos</a>
    </div>
    <div id="generalCard" style="margin-left:20%">
        <div id="generalSettings" class="settingsCard">
            <div class="w3-container w3-blue">
                <h4>General Settings</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <input type="checkbox" id="avoidDuplicateVideos" class="w3-check" onclick="updateSetting('avoidDuplicateVideos','check')"> <label>Avoid Duplicate Videos</label>
                <br>
                <i class="w3-small" style="padding-left: 4%">When this option is enabled Aerial will avoid playing the most recently played videos</i>
                <br>
                <input type="checkbox" id="timeOfDay" class="w3-check" onclick="updateSetting('timeOfDay','check')"> <label>Prioritize current time of day</label>
                <div>
                    <br>
                    <lable style="font-size: smaller">Sunrise</lable>
                    <input style="width: 15%" class="w3-input" type="time" id="sunrise" onchange="updateSetting('sunrise','time')">
                    <label style="font-size: smaller">Sunset</label>
                    <input style="width: 15%" class="w3-input" type="time" id="sunset" onchange="updateSetting('sunset','time')">
                </div>
                <br>
                <input type="checkbox" id="skipVideosWithKey" class="w3-check" onclick="updateSetting('skipVideosWithKey','check')"> <label>Use the right arrow key to skip videos</label>
                <br><br>
                <button class="w3-button w3-white w3-border w3-border-red w3-round-large" onclick="refreshAerial()">Refresh Aerial</button>
                <button class="w3-button w3-red w3-border-white w3-round-large" onclick="resetAerial()">Reset Aerial</button>
            </div>
        </div>
        <div id="multi-screenSettings" class="settingsCard" style="display: none">
            <div class="w3-container w3-blue">
                <h4>Multi-Screen Settings</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <input type="checkbox" id="sameVideoOnScreens" class="w3-check" onclick="updateSetting('sameVideoOnScreens','check')"> <label>Play the same video on each screen</label>
                <br>
                <input type="checkbox" id="onlyShowVideoOnPrimaryMonitor" class="w3-check" onclick="updateSetting('onlyShowVideoOnPrimaryMonitor','check')"> <label>Only play videos on the primary screen</label>
            </div>
        </div>
        <div id="playbackSettings" class="settingsCard" style="display: none">
            <div class="w3-container w3-blue">
                <h4>Playback Settings</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <label>Playback Speed: <span id="playbackSpeedText"></span></label><span class="w3-right" onclick="resetSetting('playbackSpeed', 'slider', 1)"><i class="fa fa-undo"></i></span>
                <br>
                <input type="range" min=".75" max="4" value="1" step=".05" id="playbackSpeed" class="slider" onchange="updateSetting('playbackSpeed','slider')">
                <h3>Filter Settings <span class="w3-right" onclick="resetFilterSettings()"><i class="fa fa-undo"></i></span></h3>
                <div class="w3-display-container" id="videoFilterSettings"></div>
                <br>
                <div class="w3-small"><input type="checkbox" id="videoQuality" class="w3-check" onclick="updateSetting('videoQuality','check')"> <label>Disable all video processing</label></div>
            </div>
        </div>
        <div id="transitionSettings" class="settingsCard" style="display: none">
            <div class="w3-container w3-blue">
                <h4>Transition Settings</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <label>Transition Speed: <span id="videoTransitionLengthText"></span></label><span class="w3-right" onclick="resetSetting('videoTransitionLength', 'slider', 1000)"><i class="fa fa-undo"></i></span>
                <br>
                <input type="range" min="750" max="4000" value="1000" step="10" id="videoTransitionLength" class="slider" onchange="updateSetting('videoTransitionLength','slider')">
            </div>
        </div>
        <div id="cacheSettings" class="settingsCard" style="display: none">
            <div class="w3-container w3-blue">
                <h4>Video Cache Settings</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <input type="checkbox" id="videoCache" class="w3-check" onclick="updateSetting('videoCache','check')"> <label>Automatically download checked videos to the cache</label>
                <br>
                <p class="w3-small" style="margin-left: 4%">The total size of all videos is approximately 20 GB</p>
                <input type="checkbox" id="videoCacheProfiles" class="w3-check" onclick="updateSetting('videoCacheProfiles','check')" style="margin-left: 8%"> <label>Include videos in saved profiles</label>
                <br>
                <input type="checkbox" id="videoCacheRemoveUnallowed" class="w3-check" onclick="updateSetting('videoCacheRemoveUnallowed','check')" style="margin-left: 8%"> <label>Automatically remove unchecked videos</label>
                <br>
                <input type="checkbox" id="immediatelyUpdateVideoCache" class="w3-check" onclick="updateSetting('immediatelyUpdateVideoCache','check')"> <label>Immediately update video cache</label>
                <br><br>
                <button class="w3-button w3-white w3-border w3-border-blue w3-round-large" onclick="updateCache()">Update cache</button>
                <button class="w3-button w3-white w3-border w3-border-red w3-round-large" onclick="deleteCache()">Delete all files</button>
                <button class="w3-button w3-white w3-border w3-border-blue w3-round-large" onclick="ipcRenderer.send('openCache');">Open in File Explorer</button>
                <button class="w3-button w3-white w3-border w3-border-blue w3-round-large" onclick="selectCacheLocation()">Move Location</button>
                <br>
                <p class="w3-small">Cache Size: <span id="videoCacheSize"></span></p>
            </div>
        </div>
        <div id="customVideoSettings" class="settingsCard" style="display: none">
            <div class="w3-container w3-blue">
                <h4>Custom Videos</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <button onclick="ipcRenderer.send('selectCustomLocation')">Add Folder</button>
                <div id="customVideoList"></div>
            </div>
        </div>
    </div>

</div>
<div id="videoTab" class="tab" style="display: none">
    <div class="w3-sidebar w3-light-grey w3-bar-block" id="videoList" style="width:34%; height: 84%">
    </div>
    <div id="videoCard" style="margin-left:34%">
        <div class="w3-container w3-blue">
            <h4 id="videoName">Video Settings</h4>
        </div>
        <div class="w3-display-container">
            <video autoplay loop controls id="videoPlayer" class="w3-display-middle" style=" width: 90%; padding-top: 55%; display: inline"></video>
            <div id="videoSettings"></div>
            <div id="videoInfo" class="videoInfo"></div>
        </div>
    </div>
</div>
<div id="textTab" class="tab" style="display: none">
    <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:20%">
        <div class="settingsListItem"><h3 class="w3-bar-item"><i class="fa fa-paragraph"></i> Text</h3></div>
        <a onclick="selectTextSetting('position')" id="textSettingsList-position" class="w3-bar-item w3-button textSettingsListItem w3-deep-orange">Position</a>
        <a onclick="selectTextSetting('textOptions')" id="textSettingsList-textOptions" class="w3-bar-item w3-button textSettingsListItem">Text Options</a>
    </div>
    <div id="textCard" style="margin-left:20%">
        <div id="positionTextSettings" class="textSettingsCard">
            <div class="w3-container w3-blue">
                <h4>Position</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <div class="w3-display-container w3-display-topleft" style="width: 50%; margin-top: 2%; margin-left: 2%">
                    <img alt="An error has occurred" src="images/B8F204CE-6024-49AB-85F9-7CA2F6DCD226.jpeg" class="w3-round" style="width: 100%;"/>
                    <div class="w3-display-topleft w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topleft" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-topright w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topright" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-bottomleft w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottomleft" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-bottomright w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottomright" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-left w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="left" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-right w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="right" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-middle w3-large imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="middle" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-topmiddle w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topmiddle" onclick="positionSelect(this)"><label></label></div>
                    <div class="w3-display-bottommiddle w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottommiddle" onclick="positionSelect(this)"><label></label></div>
                </div>
                <div class="w3-display-topright w3-container w3-right-align" style="width: 33%; margin-top: 2%; margin-right: 2%">
                    <h3 id="positionType" style="display: none">
                        <label>Type:</label>
                        <select id="positionTypeSelect">
                            <option value="none">None</option>
                            <option value="text">Text</option>
                            <option value="html">HTML</option>
                            <option value="time">Time/Date</option>
                            <option value="information">Information</option>
                        </select>
                    </h3>
                </div>
            </div>
            <div class="w3-container" style="margin-top: 27%">
                <div class="w3-container" id="positionDetails"></div>
                <div class="w3-container" id="textWidthContainer" style="display: none">
                    <br>
                    Max Width:
                    <select id="textWidthSelect">
                        <option value="33%">33%</option>
                        <option value="50%">50%</option>
                        <option value="66%">66%</option>
                        <option value="100%">100%</option>
                    </select>
                </div>
            </div>
        </div>
        <div id="textOptionsTextSettings" class="textSettingsCard" style="display: none">
            <div class="w3-container w3-blue">
                <h4>Text Options</h4>
            </div>
            <div class="w3-display-container" style="padding: 2%">
                <div class="autocomplete" style="width:300px;">
                    <label>Font: </label><input id="textFont" type="text" onchange="updateSetting('textFont', 'autocomplete')"><i class="fa fa-exclamation-triangle" id="textFontError" style="display: none"></i>
                </div>
                <br>
                <label>Font Size: </label><input class="w3-input" id="textSize" type="number" step=".25" style="width: 25%; display: inline; margin-top: 2%" onchange="updateSetting('textSize', 'number')">
                <br>
                <label>Color: </label><input class="w3-input" id="textColor" type="color" step=".25" style="width: 5%; display: inline; margin-top: 2%; padding: 0;" onchange="updateSetting('textColor', 'text')">
            </div>
        </div>
    </div>
</div>

<!--Modals-->
<div id="timeFormatExplain" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container w3-white">
            <span onclick="document.getElementById('timeFormatExplain').style.display='none'" class="w3-button w3-display-topright">&times;</span>
            <br>
            <p>Aerial uses Moment.js to display the current time. Use the characters in the table below to format the time and date however you want it.</p>
            <table class="w3-table-all">
                <tr>
                    <td><b>Month</b></td>
                    <td>M</td>
                    <td>1 2 ... 11 12</td>
                </tr>
                <tr>
                    <td></td>
                    <td>Mo</td>
                    <td>1st 2nd ... 11th 12th</td>
                </tr>
                <tr>
                    <td></td>
                    <td>MM</td>
                    <td>01 02 ... 11 12</td>
                </tr>
                <tr>
                    <td></td>
                    <td>MMM</td>
                    <td>Jan Feb ... Nov Dec</td>
                </tr>
                <tr>
                    <td></td>
                    <td>MMMM</td>
                    <td>January February ... November December</td>
                </tr>
                <tr>
                    <td><b>Day of Month</b></td>
                    <td>D</td>
                    <td>1 2 ... 30 31</td>
                </tr>
                <tr>
                    <td></td>
                    <td>Do</td>
                    <td>1st 2nd ... 30th 31st</td>
                </tr>
                <tr>
                    <td></td>
                    <td>DD</td>
                    <td>01 02 ... 30 31</td>
                </tr>
                <tr>
                    <td><b>Day of Week</b></td>
                    <td>d</td>
                    <td>0 1 ... 5 6</td>
                </tr>
                <tr>
                    <td></td>
                    <td>do</td>
                    <td>0th 1st ... 5th 6th</td>
                </tr>
                <tr>
                    <td></td>
                    <td>dd</td>
                    <td>Su Mo ... Fr Sa</td>
                </tr>
                <tr>
                    <td></td>
                    <td>ddd</td>
                    <td>Sun Mon ... Fri Sat</td>
                </tr>
                <tr>
                    <td></td>
                    <td>dddd</td>
                    <td>Sunday Monday ... Friday Saturday</td>
                </tr>
                <tr>
                    <td><b>Year</b></td>
                    <td>YY</td>
                    <td>70 71 ... 29 30</td>
                </tr>
                <tr>
                    <td></td>
                    <td>YYYY</td>
                    <td>1970 1971 ... 2029 2030</td>
                </tr>
                <tr>
                    <td><b>AM/PM</b></td>
                    <td>A</td>
                    <td>AM PM</td>
                </tr>
                <tr>
                    <td></td>
                    <td>a</td>
                    <td>am pm</td>
                </tr>
                <tr>
                    <td><b>Hour</b></td>
                    <td>H</td>
                    <td>0 1 ... 22 23</td>
                </tr>
                <tr>
                    <td></td>
                    <td>HH</td>
                    <td>00 01 ... 22 23</td>
                </tr>
                <tr>
                    <td></td>
                    <td>h</td>
                    <td>1 2 ... 11 12</td>
                </tr>
                <tr>
                    <td></td>
                    <td>hh</td>
                    <td>01 02 ... 11 12</td>
                </tr>
                <tr>
                    <td><b>Minute</b></td>
                    <td>m</td>
                    <td>0 1 ... 58 59</td>
                </tr>
                <tr>
                    <td></td>
                    <td>mm</td>
                    <td>00 01 ... 58 59</td>
                </tr>
                <tr>
                    <td><b>Second</b></td>
                    <td>s</td>
                    <td>0 1 ... 58 59</td>
                </tr>
                <tr>
                    <td></td>
                    <td>ss</td>
                    <td>00 01 ... 58 59</td>
                </tr>
                <tr>
                    <td></td>
                    <td>Z</td>
                    <td>-07:00 -06:00 ... +06:00 +07:00</td>
                </tr>
                <tr>
                    <td></td>
                    <td>ZZ</td>
                    <td>-0700 -0600 ... +0600 +0700</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="createVideoProfile" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container w3-white">
            <span onclick="document.getElementById('createVideoProfile').style.display='none'" class="w3-button w3-display-topright">&times;</span>
            <br>
            <p>
                <label>Profile Name</label><input class="w3-input" type="text" id="newProfileName">
                <br>
                <button class="w3-button w3-white w3-border w3-border-blue w3-round-large" onclick="createProfile('newProfileName');document.getElementById('createVideoProfile').style.display='none';">Create Profile</button>
            </p>
        </div>
    </div>
</div>
<div id="editCustomVideo" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container w3-white">
            <span onclick="document.getElementById('editCustomVideo').style.display='none'" class="w3-button w3-display-topright">&times;</span>
            <br>
            <p>
                <label>Name</label><input class="w3-input" type="text" id="customVideoName">
                <br>
                <button class="w3-button w3-white w3-border w3-border-blue w3-round-large" onclick="document.getElementById('editCustomVideo').style.display='none';">Done</button>
            </p>
        </div>
    </div>
</div>

<script src="config.js"></script>
</body>
</html>